<script setup lang="ts">
import { tools } from "@/utils/utils";

// 组件接口
const props = defineProps({
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
  showData: {
    type: Object,
    required: false,
    default: {},
  },
});

// 响应变量
const formatShowData = ref<string>(tools.formatJson(props.showData));

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

watch(
  () => props.showData,
  (newValue) => {
    formatShowData.value = tools.formatJson(newValue);
  },
  { deep: true }
);
</script>

<template>
  <el-container class="ResultViewJson-mt-1">
    <el-header class="ResultViewJson-mt-2">
      <el-tag :type="'success'" effect="dark"> Json </el-tag>
    </el-header>
    <el-main
      v-loading="loading"
      element-loading-text="Loading..."
      :element-loading-spinner="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      class="ResultViewJson-mt-3"
    >
      <el-tag :type="'success'" effect="plain" class="ResultViewJson-mt-4">
        <el-scrollbar class="ResultViewJson-mt-5">
          <el-text :size="'large'" class="ResultViewJson-pretty-json">
            {{ formatShowData }}
          </el-text>
        </el-scrollbar>
      </el-tag>
    </el-main>
  </el-container>
</template>

<style scoped>
.ResultViewJson-mt-1 {
  width: 100%;
  height: 100%;
}

.ResultViewJson-mt-2 {
  width: 100%;
  height: 5%;
}

.ResultViewJson-mt-3 {
  width: 100%;
  height: 95%;
}

.ResultViewJson-mt-4 {
  display: flex;
  width: 100%;
  height: 90%;
}

.ResultViewJson-mt-5 {
  display: flex;
  width: 800px;
  height: 400px;
}

/* 或使用 "pre-line" pre-wrap */
/*
.mt-4 > .el-tag__content {
  white-space: pre-line;
  word-break: break-all;
}

.pretty-json {
  padding: 10px;
  background-color: #f5f7f9;
  border-radius: 3px;
  font-family: monospace;
  white-space: pre;
  overflow-x: auto;
}
*/

.ResultViewJson-pretty-json {
  font-family: monospace;
  white-space: pre;
  line-height: 20px;
}
</style>
